<style>
.hbox-auto-sm { background-color: white; }
.hbox-auto-sm .row {margin: 0px;}
#wrapper { height: 800px; padding: 0; }
#scaled-frame { width: 1024px; height: 768px; border: 0px; }
#scaled-frame {
    zoom: 0.81;
    -moz-transform: scale(0.81);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.81);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.81);
    -webkit-transform-origin: 0 0;
}
.attribute-contnet { background-color: white; }
.attribute-contnet .form-horizontal { margin-top: 15px; margin-right: -15px; }
.attribute-contnet .form-horizontal .form-group {  margin: 0px 15px 5px 0px; }
.attribute-contnet .form-horizontal .form-group label.col-sm-4 { padding-right: 0px; line-height: 34px; }
.attribute-contnet .form-horizontal .form-group .col-sm-6 { text-align: right; line-height: 34px; }
.attribute-contnet .form-horizontal .form-group .col-sm-8 input { width: 100%; }
.attribute-contnet .form-horizontal .form-group .row { margin-left: 0px; margin-right: 0px; }
.attribute-contnet .form-horizontal .form-group .row table tr th { padding: 5px 0px; }
.attribute-contnet .form-horizontal .form-group .row table tr td { padding: 5px 0px; font-size: 12px; }
.attribute-contnet .form-horizontal .form-group .row table tr td button { padding: 1px 4px; margin-left: 5px; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #scaled-frame  { zoom: 1;  }
}
</style>
<m-page-head title="{{app.page.name}}"></m-page-head>
<div class="hbox hbox-auto-xs hbox-auto-sm">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <div class="list-group-item m-l ng-scope select m-l-none" style="height: 40%;overflow-y: auto;">
        <m-menu-tree req-id="{{info.reqId}}" on-node-select="getMenuSelected(info)"></m-menu-tree>
      </div>
      <div class="list-group-item m-l ng-scope select m-l-none" style="height: 40%;overflow-y: auto;">
        <m-page-tree ng-if="info.pageTree.isTrue" on-page-select="pageElements(info)"; req-id="{{info.reqId}}" sys="{{info.pageTree.sys}}" menu="info.pageTree.menu"></m-page-tree>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 attribute-contnet">
      <div id="wrapper">
        <iframe id="scaled-frame"></iframe>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 attribute-contnet">
        <div ng-if="!info.showElementPanel"><br/><br/>
            <div class="alert ng-isolate-scope alert-warning alert-dismissable" role="alert"" type="warning">
                <div><span class="ng-binding ng-scope"><i class="fa fa-warning "></i> 未设置或未选中元素，不能查看元素属性！<br/>点击左侧新增元素按钮或选中已有元素，即可查看属性。</span></div>
            </div>
        </div>
        <div class="form-horizontal" ng-if="info.showElementPanel">
            <div class="row form-group name-cn">
                <label for="input-name-cn" class="col-sm-4">
                    元素类型：
               </label>
                <div class="col-sm-8" style="line-height: 36px;">
                    {{info.elementType}}
                </div>
            </div>
            <div><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属性</b></div><br/>
            <div class="row form-group" ng-repeat="ele in info.elements">
                <label class="col-sm-4" ng-if="ele.name != 'columns'">{{ele.name}}</label>
                <div class="col-sm-8" ng-if="ele.name != 'columns'">
                    <input type="text" class="form-control" placeholder="请输入属性" ng-model="ele.value"/>
                </div>
            </div><br/>
            <div class="row form-group child-attribue-grid" ng-if="info.showElementsTable">
                <label for="child-attribute" class="col-sm-12">
                    <b>colums</b>
                </label>
                <div class="row">
                    <div class="col-sm-12 table-responsive">
                        <table class="table table-bordered table-condensed">
                            <thead>
                                <tr>
                                    <th>header</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               <tr ng-repeat="col in info.colums">
                                    <td ng-if="col.status == undefined">{{col.Header}}</td>
                                    <td ng-if="col.status != undefined"><input name="" type="text" ng-model="col.Header"/></td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-primary" ng-click="addColums(col)" ng-if="col.status == undefined">追加</button>
                                        <button type="button" class="btn btn-xs btn-success" ng-click="saveColums(col)" ng-if="col.status != undefined">保存</button>
                                        <button type="button" class="btn btn-xs btn-danger" ng-click="removeColums(col)">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <button type="button" class="btn btn-warning" ng-click="addAllElements()">修改元素</button>
            </div>
        </div>
    </div>
  </div>
</div>